<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import axios from 'axios';
import GoItemVue from './GoItem.vue';
const url = "/api"
// const url = "http://localhost:8000"

const data = ref([])

const { log } = console
const upChange = async (file, files) => {
  console.log(file);

  if (file != null) {
    const formData = new FormData()
    formData.append('file', file.raw)
    formData.append('data', { a: 5 })
    try {
      log(formData)
      uploadFile(formData).then(res => {
        log(res.data)
      })
    } catch (error) {
      log("err")
    }
  }
}

const uploadFile = (formData) => {
  return axios({
    method: "post",
    url: url + "/upload",
    data: formData,
  })
}

const test = () => {
  // axios({
  //   method: "get",
  //   url: url + "/dealget",
  //   params: {
  //     id: 5,
  //     name: "王春雨",
  //     girlFriend: ["楚", "小楚", "楚狗", "楚颖智"],
  //     data: {
  //       id: 10,
  //       value: ["sds","sds"]
  //     }
  //   },
  // }).then(res => {
  //   log(res.data)
  // })

  axios({
    method: "post",
    url: url + "/deal",
    data: {
      id: 5,
      name: "王春雨",
      girlFriend: ["楚", "小楚", "楚狗", "楚颖智"],
      // data: {
      //   id: 10,
      //   value: ["sds", "sds"]
      // }
    },
    headers: {
      "Content-Type": "x-www-form-urlencoded",
    },
  }).then(res => {
    log(res.data)
  })


}
const numJia = () => {

  for (let i = 0; i < 200; i++) {

    axios({
      method: "get",
      url: url + "/numjia",
      params: {
        num: i
      }
    }).then(res => {
      log(res.data)
    })
  }


}

const dogPlus = () => {
  axios({
    method: "post",
    url: url + "/dogplus"
  }).then(res => {
    log(res.data)
  })
  axios({
    method: "post",
    url: url + "/dogplus"
  }).then(res => {
    log(res.data)
  })
  axios({
    method: "post",
    url: url + "/dogplus"
  }).then(res => {
    log(res.data)
  })
}

const greet=(data)=>{
  console.log(data);
  
}
</script>

<template>
  <div style="width: 100vw;display: flex;justify-content: center;">
    <el-upload class="upload-demo" drag multiple :auto-upload="false" :show-file-list="false" :on-change="upChange">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽文件 or <em>点击上传</em>
      </div>
    </el-upload>
    <el-button type="primary" size="default" @click="test">测试</el-button>
    <el-button type="success" size="default" @click="numJia">++</el-button>
    <el-button type="primary" size="default" @click="dogPlus">狗狗++</el-button>

    <GoItemVue @greet="greet" />
  </div>

</template>

<style lang='less' scoped>
.upload-demo {
  width: 50%;
}
</style>